<template>
  <!--面包屑导航-->
  <Breadcrumb>
    <template #firstTitle>
      <span>商品管理</span>
    </template>
    <template #secondTitle>
      <span>商品分类</span>
    </template>
  </Breadcrumb>

  <!--卡片视图-->
  <el-card>
    <!--添加分类-->
    <el-row>
      <el-col>
        <el-button type="primary" @click="isShowVisible = true">添加分类</el-button>
      </el-col>
    </el-row>
    <!--商品分类列表-->
    <el-table :data="cateList" row-key="cat_id" border stripe v-loading="loading">
      <el-table-column type="index" width="60px"></el-table-column>
      <el-table-column prop="cat_name" label="分类名称" />
      <el-table-column label="是否有效" width="180">
        <template #default="scope">
          <el-icon v-if="scope.row.cat_deleted === false" style="color: lawngreen">
            <CircleCheckFilled/>
          </el-icon>
          <el-icon v-else style="color: red"><CircleCloseFilled /></el-icon>
        </template>
      </el-table-column>
      <el-table-column label="排序">
        <template #default="scope">
          <el-tag v-if="scope.row.cat_level === 0">一级</el-tag>
          <el-tag type="success" v-else-if="scope.row.cat_level === 1">二级</el-tag>
          <el-tag type="warning" v-else>三级</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150px">
        <template #default="scope">
          <el-button type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button type="danger" size="small" @click="handleDelete(scope.row.cat_id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryInfo.pagenum"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="queryInfo.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    />

    <addOrEditCategories
      v-model="isShowVisible"
      v-model:catInfo="catInfo"
      @success="addOrEditSuccess"
    />
  </el-card>
</template>

<script setup>
import { CircleCheckFilled, CircleCloseFilled } from "@element-plus/icons-vue";
import { reactive, ref, onMounted } from "vue";
import { getCategoriesList, deleteCategories } from "@/api/categories.js";
import addOrEditCategories from "./addOrEditCategories.vue";
import { ElMessage, ElMessageBox } from "element-plus";

const cateList = ref([]); // 列表数据
const loading = ref(false);
const isShowVisible = ref(false);
// 获取列表的参数对象
const queryInfo = reactive({
  type: 3,
  pagenum: 1, // 当前的页数
  pagesize: 10, // 当前每页显示多少条数据
});
const total = ref(0); // 总条数
const catInfo = ref({});

onMounted(() => {
  getListData();
});

// 查询列表
const getListData = async () => {
  loading.value = true;
  const data = await getCategoriesList(queryInfo).finally(() => {
    loading.value = false;
  });

  // console.log(data);

  cateList.value = data.result;
  total.value = data.total;
};

// 监听pageSize改变
const handleSizeChange = (newSize) => {
  queryInfo.pagesize = newSize;
  getListData();
};

// 监听页码值的改变
const handleCurrentChange = (newPage) => {
  queryInfo.pagenum = newPage;
  getListData();
};

// 跳转编辑商品
const handleEdit = (row) => {
  isShowVisible.value = true;
  catInfo.value = row;
};

// 删除
const handleDelete = (id) => {
  ElMessageBox.confirm("此操作将永久删除该分类, 是否继续?", "删除分类", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    await deleteCategories(id);
    ElMessage.success("删除成功");
    getListData();
  });
};

// 添加/编辑弹框关闭后回调函数
const addOrEditSuccess = () => {
  isShowVisible.value = false;
  catInfo.value = {};
  getListData();
};
</script>

<style lang="scss" scoped></style>
